<script setup>
  import {ref} from "vue"
  import Hd from './components/Hd.vue'
  import Trans from './components/Trans.vue'
  import Xia from './components/Xia.vue'
  let show = ref(false);
  const beforeEnter = (el) => {
    gsap.set(el,{
      opacity:0
    })
  };
  // done回调函数一定要写
  const enter = (el,done) => {
    gsap.to(el,{
      opacity:1,
      duration:2,
      onComplete:done
    })
  };
  const leave = (el,done) => {
    gsap.to(el,{
      opacity:0,
      duration:2,
      onComplete:done
    })
  };
</script>

<template>
  <!-- <Hd v-if="show">保存提交</Hd> -->

  <!-- <transition name="trans">
    <Trans v-if="show">过渡按钮1</Trans>
  </transition> -->

  <!-- 加载页面就想要有动画效果的话，使用appear -->
  <!-- <transition appear enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__backOutDown">
    <Xia v-if="show">过渡按钮2</Xia>
  </transition> -->

  <!-- 使用js定义动画 -->
  <!-- transition的生命周期：beforeEnter enter afterEnter beforeLeave leave enterLeave -->
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <Xia v-if="show">过渡按钮2</Xia>
  </transition>
  <button @click="show = !show">切换</button>
</template>

<style lang="scss" scoped>
    // 一样的样式可以一起定义
    .trans-enter-from,.trans-leave-to{
      opacity: 0;
    }
    .trans-enter-active{
      transition: 2s ease;
    }
    // 最终的状态是显示的话可以省略不写
    // .trans-enter-to,.trans-leave-from{
    //   opacity: 1;
    // }
    .trans-leave-active{
      transition: 3s ease;
    }

    // .xia-enter-from,.xia-leave-to{
    //   opacity: 0;
    // }

    // .xia-enter-to{
    //   opacity: 1;
    //   transform: rotateX(360deg);
    // }

    // .xia-leave-from{
    //   opacity: 1;
    // }

    // .xia-enter-active,.xia-leave-active{
    //   transition: 2s ease;
    // }

    .xia-enter{
      animation:identifier 2s ease;
    }

    .xia-leave{
      animation:identifier 2s ease reverse;
    }

    @keyframes identifier {
      from{
        transform:scale(0);
      }
      to{
        transform:scale(1) rotateX(360deg);
      }
    }

    button{
      margin-top: 10px;
      display: block;
    }
</style>
